<template>
  <div>
      <!-- 流行 -->
        <div class="remLists">
          <div class="title"><span>流行</span></div>
          <div class="content">
            <ul>
              <!-- <li v-for="item in popular" :key="item.id" @click="getid(item.id)"> -->
                <router-link tag="li" :to="'/songlists?id='+item.id" v-for="item in popular" :key="item.id">
                  <div class="img">
                    <van-image lazy-load
                      :src="item.coverImgUrl"
                    />
                  </div>
                  <p>{{item.name}}</p>
                  <span><i class="iconfont icon-erji"></i>{{ item.playCount | playCountData }}</span>
                </router-link>
              <!-- </li> -->
            </ul>
          </div>
        </div>
  </div>
</template>

<script>
export default {
    props:['popular'],
    methods:{
      getid(id){
        // console.log(id)
        this.$emit("getslID",id)
      },
    },
    filters:{
        playCountData(value){
          let w = value > 10000? value / 10000 : value; // 万计算
          let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
          return y;
        }
      },
}
</script>

<style>

</style>